<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2022-02-11 17:04:28
 * @LastEditTime: 2022-02-12 13:38:52
 * @LastEditors: xuechengwu
-->
<template>
  <div
    class=""
    :data-mark="config.mark"
    :data-parents="parents.join(',')"
    ref="container"
    >
    <template
      v-if="isEdit"
    >

    </template>
    <template
        v-if="!isEdit"
    >

    </template>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
function getPathFromParent(parents, page) {
  let path = '';
  parents.reduce((sum, vo, index) => {
    const mark = vo.split('.')[0];
    if (sum.components && sum.components.length > 0) {
      const { components = [] } = sum;
      const cur = components.find(vo => vo.mark === mark);
      if (cur.name === 'sys-list') {
        if (Number(linkType) === 0)
      }
    }
    return {};
  }, page)
}
export default {
    props: {
        config: {
            type: Object,
            default: () => ({}),
        },
        parents: {
            type: Array,
            default: () => [],
        },
        currentMark: {
            type: String,
            default: '',
        },
        values: {
            type: [Array, Object],
            default: () => [],
        },
        datas: {
            type: Object,
            default: () => ({}),
        },
        page: {
            type: Object,
            default: () => ({}),
        },
        isEdit: {
            type: Boolean,
            default: true,
        },
        dataLink: {
            type: String,
            default: '',
        },
        linkType: {
          type: [String, Number],
          default: 0
        }
    },
    computed: {
      vForData() {
        const { values, datas } = this;
        const { data, links = [] } = this.config;
        const targetObj = { data: _.cloneDeep(data) };
        links.forEach((vo) => {
          const { source, selectedKey, path, type } = vo;
          const targetValue = values[source];
          let value = '';
          if (Number(type) === 0) {
            value = selectedKey.split('.').reduce((cur, key) => {
              return cur[key];
            }, targetValue);
          } else if (Number(type) === 1) {
            const targetData = datas[source];
            if (targetData) {
              value = targetData.value;
            }
          } else if (Number(type) === 2) {
            // TODO: 如果当前数据是从list中获取
            // 从parents上找，构建完整的path
            
          }
          
          path.split('.').reduce((cur, key, index, array) => {
            if (array.length - 1 === index) {
              cur[key] = value
            }
            return cur[key];
          }, targetObj);
        });
        return targetObj.data;
      }
    },
    mounted() {
      if (this.isEdit) {
        new Sortable(this.$refs.container, {
          onEnd: (evt) => {
              const { newIndex, oldIndex } = evt;
              const { mark } =this. config;
              this.$emit('sorted', { parent: this.parents.concat(mark), newIndex, oldIndex });
          }
        });
        this.$refs.container.addEventListener('drop', this.dropListener);
        this.$refs.container.addEventListener('dragover', this.dragOver);
        this.$refs.container.addEventListener('dragenter', this.dragEnter);
      }
    },
    methods: {
        dropListener() {

        },
        dragOver() {

        },
        dragEnter() {

        },
    },
    beforeDestroy() {
      if (this.isEdit) {
        if (this.$refs.container) {
          this.$refs.container.removeEventListener('drop', this.dropListener);
          this.$refs.container.removeEventListener('dragover', this.dragOver);
          this.$refs.container.removeEventListener('dragenter', this.dragEnter);
        }
      }
    }
}
</script>

<style>

</style>